<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const value: any = ref([]);
const video: any = ref([]);
const message = ref('')
const updata = ref()
const router = useRouter();
// 回退
const onClickLeft = () => {
    history.back()
};
// 提交、/upload
const onSubmit = async (values: any) => {
    console.log('submit', values);
    router.push({ path: '/circle', query: { title: values.text }})
};
// 点击上传图片
const upImg = (event: MouseEvent) => {
    console.log(1);
    console.log(event);
}
// 点击上传视频
const upVideo = (event: MouseEvent) => {
    console.log(event);
}
const clock = (e: any) => {
    console.log(e);
}
// const jiagnting = (e: any) => {
//     console.log(e);
//     console.log(updata.value.value);
//     const file = new FormData();
//     file.append('file', updata.value)
// }
</script>
<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" class="icon" @click="onClickLeft" />
            发布动态
        </header>
        <main>
            <!-- <input type="file" ref="updata" @change="jiagnting"> -->
            <div>
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field name="text" v-model="message" rows="4" autosize label="文案上传" type="textarea"
                            maxlength="100" placeholder="请输入留言" show-word-limit />
                        <van-field preview-image @click-upload="upImg" after-read="clock" accept="image/*"
                            style="margin-top: 10px;height: 167px;" name="image" label="图片上传">
                            <template #input>
                                <van-uploader v-model="value" />
                            </template>
                        </van-field>
                        <van-field preview-image @click-upload="upVideo" accept="video/*"
                            style="margin-top: 10px;height: 167px;" name="video" label="视频上传">
                            <template #input>
                                <van-uploader v-model="video" />
                            </template>
                        </van-field>
                    </van-cell-group>
                    <div style="margin: 50px 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </main>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100vw;
    height: 100vh;

    header {
        width: 100vw;
        height: 50px;
        background-color: #2391f9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: relative;

        .icon {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(-50%, -50%);
        }
    }

    main {
        width: 100%;
        height: calc(100% - 50px);
        padding: 10px 20px;
        box-sizing: border-box;
    }

}
</style>